<script setup lang="tsx">
import { associatedPurchaseOrdersApi } from '@/api/order'

import { useEnumeratePicker } from '@/utils'
const { t } = useI18n()
const isExpanded = ref(true)
const togglePanel = () => {
  isExpanded.value = !isExpanded.value
}

// 使用具体类型定义 props
const props = defineProps({
  currentRow: {
    type: Object,
    default: () => null
  },
  operatorOptions: {
    type: Object,
    default: () => null
  }
})

// 定义 dataList 变量
const dataList = ref<any[]>([])
//初始化请求
const initialize = async () => {
  try {
    const params = {
      order_id: props.currentRow.id,
      order_type: props.currentRow.isWholesal ? 'wholesal' : 'order'
    }
    const resp = await associatedPurchaseOrdersApi(params)
    dataList.value = resp.data || []
  } catch (e) {}
}
initialize()
</script>

<template>
  <el-card shadow="always">
    <div @click="togglePanel" class="header cursor-pointer">
      <span>关联采购订单</span>
      <el-icon v-if="isExpanded">
        <el-icon-arrow-down />
      </el-icon>
      <el-icon v-else>
        <el-icon-arrow-right />
      </el-icon>
    </div>
    <el-collapse-transition>
      <div v-show="isExpanded" class="w-full">
        <el-table
          :data="dataList"
          highlight-current-row
          stripe
          border
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            :label="t('purchase.purchase_no')"
            width="200"
            :show-overflow-tooltip="true"
            prop="purchase_no"
          />
          <el-table-column
            :label="t('purchase.order_time')"
            prop="order_time"
            width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('purchase.signatory')"
            width="200"
            prop="signatoryid_value"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('purchase.pay_time')"
            prop="pay_time"
            width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('purchase.pay_type')"
            prop="pay_type"
            width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('purchase.pay_terms')"
            prop="pay_terms"
            width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('purchase.total_amount')"
            prop="total_amount"
            width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('purchase.other_amount')"
            prop="other_amount"
            width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('purchase.product_total_amount')"
            prop="product_total_amount"
            width="200"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            :label="t('purchase.create_time')"
            prop="create_time"
            width="200"
            :show-overflow-tooltip="true"
          />
        </el-table>
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<style scoped>
.header {
  display: flex;
  height: 40px;
  padding: 0 10px;
  margin-bottom: 10px;
  font-weight: 900;
  cursor: pointer;
  background-color: #f3f3f3;
  border-radius: 5px;
  align-items: center;
  justify-content: space-between;
}
</style>
